<template>
  <div class="box">
    <div class="box__item box__item--bg1">1</div>
    <div class="box__item box__item--bg2">2</div>
    <div class="box__item box__item--bg3">3</div>
    <div class="box__item box__item--bg4">4</div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.box {
  scroll-snap-type: x mandatory;
  overflow: auto;
  white-space: nowrap;
  &__item {
    background: pink;
    scroll-snap-align: start;//起点  center  end
    scroll-snap-stop: always;//优化拖动
    display: inline-block;
    width: 50%;
    height: 100px;
    &--bg1 {
      background: pink;
    }
    &--bg2 {
      background: blue;
    }
    &--bg3 {
      background: green;
    }
    &--bg4 {
      background: yellow;
    }
  }
}
</style>
